/**
 * Created by 1 on 2019/11/4.
 */
$(function() {
    var i = 0
    var clone = $('#inner-list li').eq(0).clone()
    $('#inner-list').append(clone)

    var size = $('#inner-list li').length

    for(var i = 0; i < size - 1; i++) {
        var l = '<li>' + (i + 1) + '</li>'
        $('#dot-list').append(l)
    }

    $('#dot-list li').eq(0).addClass('o')

    var t = setInterval(function() {
        i++
        console.log(i)
        move()
    }, 4000)

    $('#dot-list li').click(function() {
        var i = $(this).index()
        console.log(i)
        $('#inner-list').stop().animate({
            left: -647 * i + 'px'
        }, 4000)
        $(this).addClass('o').siblings().removeClass('o')
    })

    $('#btn-prev').click(function() {
        i--
        move()
    })

    $('#btn-next').click(function() {
        i++
        move()
    })

    $('#container').hover(function() {
        clearInterval(t)
        $('#btn-prev').stop().show()
        $('#btn-next').stop().show()
    }, function() {
        t = setInterval(function() {
            i++
            console.log(i)
            move()
        }, 4000)
        $('#btn-prev').stop().hide()
        $('#btn-next').stop().hide()
    })

    function move() {

        if(i == size) {
            $('#inner-list').css({
                left: 0
            })
            i = 1
        }
        if(i == -1) {
            i = size - 2
            $('#inner-list').css('left', -647 * '(size - 1)' + 'px')
        }
        $('#inner-list').stop().animate({
            left: -647 * i + 'px'
        }, 4000)
        if(i == size-1) {
            $('#dot-list li').eq(0).addClass('o').siblings().removeClass('o')
        } else {
            $('#dot-list li').eq(i).addClass('o').siblings().removeClass('o')
        }
    }
})